import { Card } from 'antd'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import CallTags from '../../CallWordPage/components/tags'
import '../css/diaCom.less'

export default function CallCont({ datalist, SearchList, addCallWord }) {
  const { t } = useTranslation()

  /* 控制显示icon */
  const [isHovering, setIsHovering] = useState(false)
  const [isHoverNum, setIsHoverNum] = useState(0)
  const handleMouse = (i: number, type) => {
    setIsHoverNum(type === 'over' ? i + 1 : 0)
    setIsHovering(type === 'over')
  }

  /* tag */
  interface SearchListItem {
    id: number | string
    label: string
  }
  type CategoryType = number | string
  function renderTagIfMatch(el: { category: CategoryType }, searchList: SearchListItem[]): JSX.Element | null {
    const matchedItem = searchList.find(item => item.id === el.category)
    if (matchedItem) {
      return <CallTags key={matchedItem.id} name={matchedItem.label} id={matchedItem.id} />
    }
    return null
  }
  return (
    <div className="Application_DiaCont flexRowStart flexWrap" style={{ margin: '0', padding: '0 0 10px' }}>
      {datalist.map((el: any, i: number) => {
        return (
          <Card
            hoverable
            key={el.id}
            className="Application_DiaCont_call_card"
            style={{ cursor: 'default' }}
            onMouseOver={() => {
              handleMouse(i, 'over')
            }}
            onMouseOut={() => {
              handleMouse(i, 'out')
            }}
          >
            <div className="flexRow flexRowJustBet">
              <div className="flexRowStart" style={{ width: '80%' }}>
                <h1 className="Application_DiaCont_call_card_name domOverflowEllip">{el.name}</h1>
                {/* tag */}
                {renderTagIfMatch(el, SearchList)}
              </div>
              <div className="flexRow callwordDiacont_add cursonCase" onClick={() => addCallWord(el)}>
                添加
              </div>
            </div>
            <p className="Application_DiaCont_carr_cont domOverflowEllip_thr">
              {el?.content || t('call.empty') + t('call.callTemCont')}
            </p>
          </Card>
        )
      })}
    </div>
  )
}
